<template>
  <div class="carousel_all">
    <div class="btm left_buttom" @click = "back1">
      <img src="../../assets/img/left.png"/>
    </div>
    <div class="btm right_buttom"  @click="next1">
      <img src="../../assets/img/right.png"/>
    </div>
    <transition-group tag="ul" name="li">

      <!--<ul>-->
        <!--<li v-if="carousel">-->
          <!--<div class="carousel_img">-->
            <!--<div class="carousel_text">-->
              <!--<div><img src="../../assets/img/carousel-1_title.png"/></div>-->
              <!--<font style="font-size: 35px;color: #ff6437;">-->
                <!--<b>我们智力玉贷款</b><br>-->
                <!--<span style="font-size: 50px">轻松贷款</span>-->
              <!--</font><br>-->
               <!--<p style="font-size: 19px;color: #999999;">-->
                 <!--<font>-->
                  <!--<span>按揭房也可贷到款广大房主的福音</span><br>-->
                 <!--</font>-->
               <!--</p>-->
              <!--<p style="font-size: 15px;color: #999999;">-->
                <!--<span>MORTGAGE ROOMS CAN ALSO BE CREDITED</span>-->
              <!--</p>-->
            <!--</div>-->
            <!--<img src="../../assets/img/carousel-1.jpg">-->
          <!--</div>-->
        <!--</li>-->
        <!--<li v-else>-->
          <!--<div class="carousel_img">-->
            <!--<div class="carousel_text">-->
              <!--<font style="font-size: 50px;color: #3b4b98;">-->
                <!--<b>贷款服务</b><br>-->
                <!--<span style="font-size: 43px">致力于为您提供最全面</span>-->
              <!--</font><br>-->
               <!--<p style="font-size: 15px;color: #ffffff;">-->
                 <!--<font>-->
                  <!--<span>WE ARE COMMITTED TO PROVIDING YOU WITH THE MOST </span><br>-->
                  <!--<span>COMPREHENSIVE LOAN SERVICE</span>-->
                 <!--</font>-->
               <!--</p>-->
            <!--</div>-->
            <!--<img src="../../assets/img/carousel-2.jpg">-->
          <!--</div>-->
        <!--</li>-->
      <!--</ul>-->

        <li v-for="(item,index) in img" :key="index" v-show="index === mark">
          <img :src="item.img" width="1440" height="375"/>
        </li>

    </transition-group>

  </div>
</template>

<script>
//  import $ from 'jquery'
  export default {
    name: 'carousel',
    data () {
      return {
        carousel: true,
        mark: 0,
        img: [
          {
            img: require('../../assets/img/lunbo1.jpg'),
            alt: '图片丢失'
          },
          {
            img: require('../../assets/img/lunbo2.jpg'),
            alt: '图片丢失'
          },
          {
            img: require('../../assets/img/lunbo1.jpg'),
            alt: '图片丢失'
          },
          {
            img: require('../../assets/img/lunbo2.jpg'),
            alt: '图片丢失'
          },
          {
            img: require('../../assets/img/lunbo1.jpg'),
            alt: '图片丢失'
          }
        ]
      }
    },
    created () {
      this.play()
      console.log(this)
    },
    methods: {
      autoplay: function () {
        this.mark++
        if (this.mark === 4) {
          this.mark = 0
        }
      },
      play: function () {
        setInterval(this.autoplay, 4000)
      },
      back1: function () {
        this.mark -= 1
        if (this.mark === 0) {
          this.mark = 4
        }
      },
      next1: function () {
        this.mark += 1
        if (this.mark === 4) {
          this.mark = 0
        }
      }
    }
  }
</script>
<style lang="scss">
  .carousel_all{
    width: 1440px;
    height: 377px;
    position: relative;
    overflow: hidden;
    .btm{
      position: absolute;
      cursor: pointer;
      width: 71px;
      height: 71px;
      z-index: 10;
      background: rgba(0,0,0,0.1);
      top:40%;
    }
    .left_buttom{
      left: 3%;
    }
    .right_buttom{
      right: 3%;
    }
    ul li{
      float: left;
    }
    .carousel_img{
      /*background-image: url("../../assets/img/carousel-1.jpg");*/
      width: 1440px;
      height: 377px;
      position: relative;
      .carousel_text{
        position: absolute;
        left:100px;
        top:20%;
      }
    }
  }
  .li-enter-active{
    transform: translateX(0);
    transition: all 2s ease;
  }
  .li-leave-active{
    transform: translateX(-100%);
    transition: all 2s ease;
  }
  .li-enter{
    transform: translateX(100%);
    transition: all 2s ease;
  }
  .li-leave{
    transform: translateX(0);
  }
</style>
